<template>
  <div class="user">
    <div class="tab-list">
      <el-row :gutter="20">
        <el-col :span="6">
          <div class="user-card">
            <div class="text-center">
              <UserAvatar />
            </div>
            <div class="u-info">
              <div class="u-info-name">
                <span class="u-name">{{ userStore.name }}</span>
                <span class="u-level">{{ userInfo.memberLevelName }}</span>
              </div>
              <div class="u-info-item">
                <span>积分：</span>
                <span class="val">{{ userInfo.integration }}</span>
              </div>
              <div class="u-info-item">
                <span>成长值：</span>
                <span class="val">{{ userInfo.growth }}</span>
              </div>
              <div class="profile-content">
                <div class="user-data-item">
                  <div class="statistic-data">{{ userInfo.consumeAmount }}</div>
                  <div class="statistic-title">累计消费</div>
                </div>
                <div class="user-data-item">
                  <div class="statistic-data">{{ userInfo.couponAmount }}</div>
                  <div class="statistic-title">累计优惠</div>
                </div>
                <div class="user-data-item">
                  <div class="statistic-data">{{ userInfo.commentCount }}</div>
                  <div class="statistic-title">我的评价</div>
                </div>
              </div>
            </div>
          </div>
          <!-- <Profile></Profile> -->
        </el-col>
        <el-col :span="18">
          <el-tabs
            v-model="activeName"
            tab-position="top"
            style="
               {
                height: 100%;
              }
            "
            class="demo-tabs"
            type="border-card"
            @tab-change="activeTab"
          >
            <el-tab-pane label="我的收藏" name="Profile">
              <!-- <Profile></Profile> -->
              <Collect />
            </el-tab-pane>
            <el-tab-pane label="收货地址" name="Address">
              <Address />
            </el-tab-pane>
            <el-tab-pane label="我的订单" name="Order">
              <Order />
            </el-tab-pane>
            <el-tab-pane label="领取记录" name="Coupon">
              <Coupon />
            </el-tab-pane>
            <el-tab-pane label="积分记录" name="Growth">
              <Integration />
            </el-tab-pane>
            <el-tab-pane label="成长记录" name="Integration">
              <Growth />
            </el-tab-pane>
          </el-tabs>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup>
import Profile from "./profile/index";
import Order from "./order";
import Address from "./address";
import Coupon from "./coupon";
import Growth from "./growth";
import Integration from "./integration";
import Collect from "./collect";
import UserAvatar from "@/views/system/user/profile/userAvatar";
import useUserStore from "@/store/modules/user";
import {
  getUserMemberInfo,
  listUserComment,
} from "@/api/mall/client/user/user";
import { useRoute, useRouter } from "vue-router";
const userStore = useUserStore();
const activeName = ref("Profile");
const route = useRoute();

const query = route.query;
if (query.tab) {
  activeName.value = query.tab;
}
const activeTab = (name) => {
  console.log(name);
  activeName.value = name;
};
const userInfo = ref({});
// 获取信息
const getMemberInfo = async () => {
  const res = await getUserMemberInfo();
  userInfo.value = res.data;
};
getMemberInfo();
</script>

<style lang="scss" scoped>
.user {
  // padding: 20px;
  // background: #fff;
  min-height: 600px;
  .user-card {
    background-color: #fff;
    padding: 20px;
    display: flex;
    flex-direction: column;
    .u-info {
      .u-info-name {
        text-align: center;
        display: flex;
        flex-direction: column;
        .u-name {
          font-size: 18px;
          padding: 5px 0;
        }
        .u-level {
          color: #f56c6c;
          font-weight: 600;
          font-size: 14px;
        }
      }
      .u-info-item {
        font-size: 14px;
        span {
          color: #606266;
          min-width: 60px;
        }
      }
    }
    // align-items: center;

    .profile-content {
      margin-top: 20px;
      border-top: 1px solid #e8e8e8;
      border-bottom: 1px solid #e8e8e8;
      // border: 1px solid #e8e8e8;
      display: flex;
      justify-content: space-around;
      width: 100%;
      .user-data-item {
        width: 33.33%;
        border-right: 1px solid #e8e8e8;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 10px;
        &:nth-child(3) {
          border-right: none;
        }
        .statistic-data {
          font-weight: 600;
          margin-bottom: 5px;
          color: #76797e;
        }
        .statistic-title {
          font-size: 14px;
          color: #606266;
        }
      }
    }
  }
  .tab-list {
    margin-top: 20px;
    // padding: 20px;
    height: 100%;
    // background: #fff;
  }
  :deep(.el-tabs__item.is-active) {
    color: #1aa684;
  }
  :deep(.el-tabs__active-bar) {
    background-color: #1aa684;
  }
  :deep(.el-tabs__item:hover) {
    color: #1aa684;
  }
  :deep(
      .el-tabs--border-card
        > .el-tabs__header
        .el-tabs__item:not(.is-disabled):hover
    ) {
    color: #1aa684;
  }
  .view {
    background: #fff;
    padding: 20px;
  }
}
</style>

<style lang="scss" scoped></style>
